<template>
  <Layout>
    <Form ref="form1" :model="form1" :label-width="120">
      <Row class="query-form" style="padding-top: 15px">
        <Col span="8">
          <FormItem label='企业名称：'>
            <cascaderDom ref="riskUnit" @setOrgInfo="setRiskUnit" @setOrgname="setRiskUnitName"
                         :orgTree="true"></cascaderDom>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label='二级集团：'>
            <Select v-model="form1.twoLevelOrgId" filterable>
              <Option v-for="item in twoLevelOrgs" :value="item.orgId" :key="item.orgId">{{ item.orgName }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <!--<Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>-->
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button class="ivu-btn-query" icon="md-search" @click="query()">查询</Button>
        </Col>
      </Row>
      <Row class="query-form">
        <Col span="24">
          <Button size="large" class="ivu-btn-add" icon="md-add" @click="exportExecl">导出</Button>
        </Col>
      </Row>
    </Form>
    <Table ref='table' :height="tableHeight" :loading="loading" size="small" class="table" no-data-text="没有查询到相关数据!"
           highlight-row stripe border :columns="columns1" width="100%" :data="dataTable">
    </Table>
    <Row style="margin-right:10px;">
      <Col span="24">
        <Page :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
              style="float: right" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
              show-total show-sizer show-elevator/>
      </Col>
    </Row>

    <div v-show="downloading"
         style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:99999;background-color:#000000;opacity:0.5;">
      <svg-bar style="position:absolute;top:50%;left:50%;margin-left:-100px;margin-top:-100px"
               :options="options" :value="batchProcess"></svg-bar>
    </div>
  </Layout>
</template>

<script>
  import {Api} from '../../../api/index.js'
  import {sessionStorage} from '../../../common/cacheUtils.js';
  import cascaderDom from '../../../components/cascader-dom.vue';
  import svgBar from 'svg-progress-bar'

  export default {
    components: {svgBar,cascaderDom},
    name: "riskEvaluationAnalysisRiskPreset",//环保风险预置
    data() {
      return {
        batchProcess:0,
        downloading:false,
        tableHeight: '',
        loading: false,
        rikRankList: ["重大", "较大", "一般", "低"],
        rikRanks: [],
        form1: {
          orgId: '',
        },
        twoLevelOrgs:[],
        pageSizeArray: [10, 20, 50],
        pagedata: {
          total: 0,
          pageSize: 10,
          currentPage: 1,
        },
        dataTable: [],
        ruleCustom: {
          corporateName: [{
            validator: (rule, value, callback) => {
              if (value == null || value == '' || value == undefined) {
                callback(' ')
              } else {
                callback()
              }
            },
            required: true,
            trigger: 'change'
          }],
          numGrade: [{
            validator: (rule, value, callback) => {
              if (value == null || value == '' || value == undefined) {
                callback(' ')
              } else {
                callback()
              }
            },
            required: true,
            trigger: 'change'
          }],
          persion: [{
            validator: (rule, value, callback) => {
              if (value == null || value == '' || value == undefined) {
                callback(' ')
              } else {
                callback()
              }
            },
            required: true,
            trigger: 'change'
          }],
          riskLevel: [{
            validator: (rule, value, callback) => {
              if (value == null || value == '' || value == undefined) {
                callback(' ')
              } else {
                callback()
              }
            },
            required: true,
            trigger: 'change'
          }],
          prevention: [{
            validator: (rule, value, callback) => {
              if (value == null || value == '' || value == undefined) {
                callback(' ')
              } else {
                callback()
              }
            },
            required: true,
            trigger: 'change'
          }],

          t1: [{
            validator: (rule, value, callback) => {
              if (value == null || value == '' || value == undefined) {
                callback(' ')
              } else {
                callback()
              }
            },
            required: true,
            trigger: 'change'
          }],
          t2: [{
            validator: (rule, value, callback) => {
              if (value == null || value == '' || value == undefined) {
                callback(' ')
              } else {
                callback()
              }
            },
            required: true,
            trigger: 'change'
          }],
          t3: [{
            validator: (rule, value, callback) => {
              if (value == null || value == '' || value == undefined) {
                callback(' ')
              } else {
                callback()
              }
            },
            required: true,
            trigger: 'change'
          }],
          t4: [{
            validator: (rule, value, callback) => {
              if (value == null || value == '' || value == undefined) {
                callback(' ')
              } else {
                callback()
              }
            },
            required: true,
            trigger: 'change'
          }],
          t5: [{
            validator: (rule, value, callback) => {
              if (value == null || value == '' || value == undefined) {
                callback(' ')
              } else {
                callback()
              }
            },
            required: true,
            trigger: 'change'
          }],
          z: [{
            validator: (rule, value, callback) => {
              if (value == null || value == '' || value == undefined) {
                callback(' ')
              } else {
                callback()
              }
            },
            required: true,
            trigger: 'change'
          }],
        },
        columns1: [
          {
            title: "序号",
            width: 80,
            align: "center",
            fixed: 'left',
            render: (h, params) => {
              if(params.index == 0)
                return h('span', '汇总');
              else
                return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize);
            }
          },
          {
            minWidth: 150,
            title: '单位名称',
            align: 'center',
            key: 'riskUnitName',
          },
          {
            minWidth: 150,
            title: '风险点等级个数（I）',
            align: 'center',
            key: 'riskGradeNum1',
          },
          {
            minWidth: 150,
            title: '风险点等级个数（Ⅱ）',
            align: 'center',
            key: 'riskGradeNum2',
          },
          {
            minWidth: 150,
            title: '风险点等级个数（Ⅲ）',
            align: 'center',
            key: 'riskGradeNum3',
          },
          {
            minWidth: 150,
            title: '风险点等级个数（Ⅳ）',
            align: 'center',
            key: 'riskGradeNum4',
          },
          {
            minWidth: 150,
            title: '企业风险等级',
            align: 'center',
            key: 'grade',
            render: (h, params) => {
              if(params.row.grade1 != ""){
                return h('span',"I");
              }else if(params.row.grade2 != ""){
                return h('span',"Ⅱ");
              }else if(params.row.grade3 != ""){
                return h('span',"Ⅲ");
              }else if(params.row.grade4 != ""){
                return h('span', "Ⅳ");
              }
            }
          }
        ],
        add: false,
        model1: false,
        model3: false,
        InputData: {},
        buttonLoading: false,
      }
    },
    computed: {
      options: function() {
        return {
          radius: 50,//大小
          duration: 2,//变化时间长度
          circleWidth: 5,//圆环宽度
          pathColors: ['#A2A2A2', '#FA5657'], //圆环 底色和 上面的颜色
          circleLineCap: 'round',//进度条 形状  圆环 或者矩形
          text: function (value) {
            return this.htmlifyNumber(value) + '<span style="font-size: 0.4em;">%</span>';
          },
          textColor: 'rgb(33, 150, 243)'
        }
      },
    },
    mounted() {
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
      this.query();
      this.queryTwoOrgInfo();
    },
    methods: {
      queryTwoOrgInfo() {
        if(sessionStorage('userId').getObject('userId').companyId != '18000000'){
          this.twoLevelOrgs.push({orgId:sessionStorage('userId').getObject('userId').twoLevelOrgId ,
            orgName:sessionStorage('userId').getObject('userId').twoLevelOrgName});
        }else {
          this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
            this.twoLevelOrgs = res.data.data
          }).catch(e => {
          })
        }
      },
      setRiskUnit(data) {
        this.form1.orgId = data[data.length - 1];
      },
      setRiskUnitName(data) {
        this.form1.orgName = data;
      },
      onCancel() {
        this.InputData = {}
        this.model1 = false
        this.query()
      },
      query() {
        this.loading = true;
        let data = {
          startPage: this.pagedata.currentPage,
          size: this.pagedata.pageSize,
          companyId: sessionStorage('userId').getObject('userId').companyId
        };
        data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));
        let url = Api.enRiskAassessmentTableList
        this.$http.get(url, {params: data}).then((res) => {
          this.dataTable = res.data.data.data;
          this.pagedata.total = res.data.data.totalSize;
          this.loading = false;
        }).catch(e => {
          this.$Message.error("数据获取失败")
        })
      },
      reset() {
        this.form1 = {}
        this.$refs.riskUnit.resetCurrentOrg();
        this.pagedata.currentPage=1
        this.query()
      },
      pageChange(pageNum) {
        this.pagedata.currentPage = pageNum;
        this.query();
      },
      pageSizeChange(pageSize) {
        this.pagedata.pageSize = pageSize;
        this.query();
      },
      exportExecl(){
		  let data = {
		    companyId: sessionStorage('userId').getObject('userId').companyId
		  };
		  data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));
        this.downloading = true;
        this.$http.get(Api.enRiskAassessmentTableExport,{
			params: data,
          responseType: 'blob',
          progress:function(e){
            _this.batchProcess = 100 * (e.loaded / e.total);
            if(_this.batchProcess == 100){
              _this.downloading = false;
            }
          }
        }).then((res) => {
          const aLink = document.createElement("a");
          let blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
          })
          aLink.href = URL.createObjectURL(blob);
          aLink.download = "金隅集团环境风险辨识评估清单汇总表.xlsx" //标题
          aLink.click();
          document.body.appendChild(aLink);
          this.downloading = false;
        }, function(res){
          this.$Message.error('生成失败');
          this.downloading = false;
        })
      }
    }
  }
</script>

<style scoped>
  @import '../../../index.css';
</style>